<!DOCTYPE html>
<html lang="zh-CN" style="background-color: #fff;">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <link rel="icon" href="/favicon.ico" />
    <title>大连印山官网</title>
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div>
        <div class="login-sign">
          <div class="sign-content">
            <div class="content-top">
              <span class="top-title">
                SCHOLARSHIPofCHINA
              </span>
              <span class="top-text" id="login">
                Already have an account? Log in here
              </span>
            </div>
            <div class="content-self">
              <p class="self-title">
                Join SCHOLARSHIPofCHINA
              </p>
              <div role="switch" class="el-switch self-switch">
                <input type="checkbox" name="" true-value="true" class="el-switch__input">
                <span class="el-switch__label el-switch__label--left is-active">
                  <span>
                    Email verification
                  </span>
                </span>
                <span class="el-switch__core" style="width: 40px;">
                </span>
                <span class="el-switch__label el-switch__label--right">
                  <span aria-hidden="true">
                    Phone number verification
                  </span>
                </span>
              </div>
              <ul class="self-info">
                <li class="info-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Username
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your username"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list" style="height: 100px;">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Select your nationality
                  </p>
                  <div class="el-select list-ipt">
                    <select placeholder="Please enter your nationality" style="outline: none;">
                      <option value="1">American Samoa</option>
                      <option value="2">Anguilla</option>
                      <option value="3">Antarctica</option>
                      <option value="4">Antigua and Barbuda</option>
                      <option value="5">Arab Republic of Egypt</option>
                      <option value="6">Aruba</option>
                    </select>
                  </div>
                </li>
                <li class="info-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    City
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your living city"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list phone-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Phone
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your phone number"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list email-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Email
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your Email"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list phone2-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Phone
                  </p>
                  <div class="list-ipt el-input">
                    <select placeholder="Please enter your nationality" style="outline: none;">
                      <option value="1">American Samoa</option>
                      <option value="2">Anguilla</option>
                      <option value="3">Antarctica</option>
                      <option value="4">Antigua and Barbuda</option>
                      <option value="5">Arab Republic of Egypt</option>
                      <option value="6">Aruba</option>
                    </select>
                  </div>
                  <div class="list-ipt te el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your phone number"
                    class="el-input__inner">
                  </div>
                  <button type="button" class="el-button list-btn el-button--default">
                    <span>
                      Get Code
                    </span>
                  </button>
                </li>
                <li class="info-list email2-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Email
                  </p>
                  <div class="list-ipt te el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your email"
                    class="el-input__inner">
                  </div>
                  <button type="button" class="el-button list-btn el-button--default">
                    <span>
                      Get Code
                    </span>
                  </button>
                  <p class="list-ipt te1">
                    If you don't receive the verification code, please check if the email
                    is in your junk folder or spam list. You can also contact our consultant
                    to get help. Email:
                    <a href="mailto:eduprchinacom@gmail.com">
                      eduprchinacom@gmail.com
                    </a>
                    WeChat: eduprchina01
                  </p>
                </li>
                <li class="info-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Verification code
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter verification code"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Password
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please enter your password"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list">
                  <p class="list-title">
                    <span class="title-icon">
                      *
                    </span>
                    Confirm password
                  </p>
                  <div class="list-ipt el-input">
                    <input type="text" autocomplete="off" placeholder="Please re-enter your password"
                    class="el-input__inner">
                  </div>
                </li>
                <li class="info-list">
                  <p class="list-title">
                    <span data-v-48589afc="">
                    </span>
                    Where did you know us ?
                  </p>
                  <div class="el-select list-ipt">
                    <select style="outline: none;">
                      <option value="">Wechat</option>
                      <option value="1">Live Stream</option>
                      <option value="2">Friends & Teachers</option>
                      <option value="3">Fackbook</option>
                      <option value="4">Twitter</option>
                      <option value="5">Youtube</option>
                      <option value="6">RedNote</option>
                    </select>
                  </div>
                </li>
              </ul>
              <div class="content-footer">
                <div class="footer-pact">
                  <label class="el-checkbox footer-checkbox is-checked">
                    <span class="el-checkbox__input">
                      <span class="el-checkbox__inner">
                      </span>
                      <input type="checkbox" aria-hidden="false" class="el-checkbox__original"
                      value="">
                    </span>
                  </label>
                  <span class="pact-text">
                    I agree to the
                    <span class="text-click">
                      Terms of Use
                    </span>
                    and
                    <span class="text-click">
                      Privacy Policy
                    </span>
                    .
                  </span>
                </div>
                <button type="button" class="el-button footer-btn el-button--primary">
                  <span>
                    Sign Up
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    document.querySelector('#login').addEventListener('click', function() {
      window.location.href = './index.html?login=true'
    })
    document.querySelector('.el-switch').addEventListener('click', function() {
      const isActive = this.classList.contains('is-checked')
      if (!isActive) {
        this.classList.add('is-checked');
        document.querySelector('.self-info').classList.add('active');
      }else{
        this.classList.remove('is-checked');
        document.querySelector('.self-info').classList.remove('active');
      }
    })
    document.querySelector('.el-checkbox').addEventListener('click', function(e) {
      e.preventDefault()
      const isActive = this.classList.contains('is-checked')
      if (!isActive) {
        this.classList.add('is-checked');
      }else{
        this.classList.remove('is-checked');
      }
    })
  </script>